<!--
 * @Author: your name
 * @Date: 2020-10-17 16:54:07
 * @LastEditTime: 2020-12-24 10:12:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Web\JQuery基础\Ch5JQuery动画\03淡入淡出.html
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../JQ/jquery-3.5.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#img1").bind("click",function(){
					$("#a").fadeIn(1000);
				})
				$("#img2").bind("click",function(){
					$("#b").fadeOut(600);
				})
			})
		</script>

	</head>
	<body>
		<input type="button" value="第一个图片" id="img1" />
		<img src="../Ch3JQuery操作DOM/image/a2.png" style="display: none;" id="a"/>
		<input type="button" value="第二个图片" id="img2" />
		<img src="../Ch3JQuery操作DOM/image/a1.png" id="b"/>
	</body>
</html>
<!--
	四：淡入淡出的动画效果

fadeIn(speed,[callback]);
通过增大不透明度实现匹配元素淡入的效果
$("img").fadeIn(300);淡入效果

fadeOut(speed,[callback]);
通过减小不透明度实现匹配元素淡出的效果
$("img").fadeOut(300);

fadeTo(speed,opacity,[callback])
将匹配元素的不透明度以渐进的方式调整到指定的参数
$("img").fadeTo(300,0.15)在3秒内将图片淡入淡出至15%不透明度
opacity值在0-1,值越小可见性越差 0完全透明	1完全不透明

-->